<template>
	<z-paging ref="paging" v-model="golflist" @query="getgolf" :loading-more-enabled="false">
		<view class="flex-col page">
			<view class="flex-col group_4">
				<view style="width: 100%;height: 120rpx;margin-top: 20rpx;">
					<view style="width: 70%;height: 120rpx;float: left;">
						<view style="width: 50%;height: 100rpx;float: left;">
							<view
								style="width: 80%;height: 80rpx;border: 2rpx #7ac756 solid;margin-left: 10rpx;background-color: #eef8e8;">
								<view style="color: #7ac756;text-align: center;font-size: 26rpx;">
									{{court_name}}
								</view>
								<view style="color: #7ac756;text-align: center;font-size: 26rpx;">
									{{field_name}}
								</view>
							</view>
						</view>
						<view style="width: 50%;height: 100rpx;float: right;">
							<view
								style="width: 70%;height: 80rpx;border: 2rpx #7ac756 solid;background-color: #eef8e8;">
								<view style="color: #7ac756;text-align: center;font-size: 26rpx;">
									{{start_time}} - {{end_time}}
								</view>
								<!-- <view style="color: #7ac756;text-align: center;font-size: 26rpx;">
								</view> -->
							</view>
						</view>
					</view>
					<view style="width: 30%;height: 120rpx;float: right;">

					</view>
				</view>
			</view>
			<!-- <view class="flex-col items-start section_1"> -->
			<!-- <view class="group_5">
					<text class="text_2">我的剩余可分享</text>
					<text class="text_3">10名额</text>
					<text class="text_4">名额</text>
					<text class="text_5" style="padding-left: 200rpx">添加好友</text>
				</view> -->
			<!-- <view @click="addlist" style="width: 170rpx; height: 60rpx;position: absolute; top: 22rpx; right: 30rpx;color: #2f75fa;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;border-radius: 75rpx 75rpx ;text-align: center;line-height:60rpx;border: 1rpx #2f75fa solid;">
					添加好友
				</view> -->

			<!-- </view> -->
			<view class="flex-col group_6">
				<view class="flex-col">
					<view class="member-info">
						<view class="list">
							<scroll-view class="scroll-view_H" scroll-y="true" style="height: 78vh;">
								<checkbox-group shape="circle" @change="radioChecked">
									<label class="item flex-between" v-for="(item, index) in golflist" :key="index"
										v-if="item.can == 1">
										<view class="flex-align">
											<!-- <u--image width="50" height="50" shape="circle" :src="item.avatar">
											</u--image> -->
											<u-avatar :src="item.avatar" size="100rpx"></u-avatar>
											<view class="info">
												<view class="name">{{item.his_member_name || '' }}</view>
												<view class="phone">{{item.his_member_type || '' }}</view>
											</view>
										</view>
										<view class="radioBox" style="padding-left: 34rpx">
											<checkbox color="#2f75fa" :value="item.his_member_id"
												:checked="item.checked" :disabled="item.disabled" />
										</view>
									</label>
								</checkbox-group>
								<view style="width: 100%;height: 110rpx;">
								</view>
							</scroll-view>
						</view>
						<view class="" style="width: 100%; height: 100rpx;">
						</view>
					</view>
				</view>
			</view>
		</view>
		<template slot="bottom">
			<view class="d-p-l-30 d-p-r-30 d-p-b-20 d-p-t-20" v-if="ids != ''">
				<u-button type="primary" shape="circle" :custom-style="{
						height: '80rpx',
						fontSize: '30rpx',
						background: '#59A0FF'
					}" @click="shareFriend">
					确定
				</u-button>
			</view>
			<view class="d-p-l-30 d-p-r-30 d-p-b-20 d-p-t-20" v-if="ids == ''">
				<u-button type="primary" shape="circle" :custom-style="{
						height: '80rpx',
						fontSize: '30rpx',
						background: '#c5c5c5',
						border: '2px solid #c5c5c5'
					}" >
					确定
				</u-button>
			</view>
		</template>
	</z-paging>
</template>

<script>
	import {
		getFriend,
		shareFriend
	} from '@/common/api';
	export default {
		data() {
			return {
				golflist: [],
				ids: [],
				court_name: "",
				field_name: "",
				start_time: "",
				end_time: "",
				id: ''
			}
		},
		computed: {
			checked: {
				get() {
					return this.value;
				},
				set(val) {
					this.$emit('input', val);
				}
			}
		},
		onLoad(options) {
			console.log(options, '999')
			this.court_name = options.court_name
			this.field_name = options.field_name
			this.start_time = options.start_time
			this.end_time = options.end_time
			this.id = options.id
		},
		onShow() {
			try {
				this.$refs.paging.reload(false)
			} catch (e) {}
		},
		methods: {
			// 项目
			radioChecked(e) {
				this.ids = []
				console.log(e)
				this.types = 1
				this.ids = e.detail.value
				console.log(this.ids)
			},
			getgolf(page, limit) {
				getFriend({
						page,
						limit
					})
					.then(res => {
						let golflist = res.data.map(item => {
							// item.show = false;
							return item;
						});
						this.$refs.paging.complete(golflist);
					})
					.catch(err => {
						this.$refs.paging.complete(false);
					});
			},

			addlist() {
				uni.redirectTo({
					url: '/pages_other/teammate/add/add'
				})
			},
			add() {
				uni.navigateTo({
					url: '/pages/personal/member-info/add/add'
				});
			},
			async shareFriend() {
				let that = this
				uni.showModal({
					title: '是否确定分享！',
					// 提示文字
					content: '是否确定分享！此分享不可逆，请谨慎操作',
					// 取消按钮的文字自定义
					cancelText: "取消",
					// 确认按钮的文字自定义
					confirmText: "确定",
					//删除字体的颜色 
					confirmColor: '#000000',
					//取消字体的颜色
					cancelColor: '#999',
					success: function(res) {
						if (res.confirm) {
							// 执行确认后的操作
							shareFriend({
									member_id: that.ids,
									id: that.id,
								})
								.then(res => {
									console.log(res,'9999')
									setTimeout(() => {
										uni.navigateBack({
											delta: 1, //返回层数，2则上上页
										})
									}, 500)
									uni.$u.toast('分享成功');
									// that.$refs.paging.complete(golflist);
								})
								.catch(err => {
									that.$refs.paging.complete(false);
								});
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.member-info {
		padding: 0 4rpx;

		/deep/.u-index-list {
			scroll-view {
				height: calc(100vh - 220rpx - env(safe-area-inset-bottom));
				;
			}
		}

		.list {
			width: 100%;

			.item {
				padding: 20rpx 0;

				.tag {
					margin-left: 10rpx;
				}

				.phone {
					color: #BEBEBE;
					font-size: 26rpx;
					margin-top: 13rpx;
				}

				/deep/ .u-number-box {
					.u-number-box__minus,
					.u-number-box__plus,
					.u-number-box__input {
						width: 45rpx !important;
						font-size: 24rpx !important;
						height: 45rpx !important;

						text {
							font-size: 24rpx !important;
						}
					}

					.u-number-box__input {
						background-color: transparent !important;
					}
				}

				.detail-right {
					margin-left: 22%;

					text {
						width: 60rpx;
						line-height: 60rpx;
						text-align: center;
						display: inline-block;
						background-color: #F7F7F7;
						// margin-right: 10rpx;
						font-size: 28rpx;
					}

					.add {
						color: #FA4305;
						border-radius: 10rpx 30rpx 30rpx 10rpx;
						margin-right: 20rpx;
					}

					.subtract {
						border-radius: 30rpx 10rpx 10rpx 30rpx;
					}
				}
			}
		}


		.title {
			font-size: 32rpx;
			height: 100rpx;
			padding-top: 40rpx;

			&::before {
				content: '';
				display: inline-block;
				width: 6rpx;
				height: 28rpx;
				background-color: #0072ff;
				margin-top: 2rpx;
				margin-right: 22rpx;
			}
		}

		.list-cell {
			padding: 24rpx 0;
			position: relative;

			&::before {
				content: '';
				position: absolute;
				left: 110rpx;
				bottom: 0;
				right: 0;
				height: 1px;
				background-color: #f2f2f2;
			}

			.right {
				margin-left: 20rpx;
			}

			.phone {
				font-size: 22rpx;
				font-weight: 400;
				margin-top: 10rpx;
				color: #BEBEBE;
			}

		}
	}

	// /deep/ checkbox .wx-checkbox-input {
	//   border-radius: 50% !important;
	//   color: #ffffff !important;
	// }

	// /deep/ checkbox .wx-checkbox-input.wx-checkbox-input-checked {
	//   color: #fff;
	//   background: #2851F3;
	// }

	// /deep/.wx-checkbox-input.wx-checkbox-input-checked {
	//   border: none !important;
	// }
	/*checkbox 选项框大小 */

	.checkbox .wx-checkbox-input {
		border-radius: 50upx;
		/* 圆角 */
		width: 50upx;
		/* 背景的宽 */
		height: 50upx;
		/* 背景的高 */
		border: 1px solid #ccc;
		background: #eee;
	}

	/* 复选框禁用样式 */

	.checkbox .wx-checkbox-input-disabled {
		border-radius: 50upx;
		/* 圆角 */
		width: 50upx;
		/* 背景的宽 */
		height: 50upx;
		/* 背景的高 */
		background: #f3f3f3;
		border: 1px solid rgba(201, 201, 201, 1);
	}

	/* 复选框选中后样式 */

	.checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		background: rgba(255, 129, 92, 1);
		border: 1px solid rgba(255, 129, 92, 1);
	}

	/*checkbox选中后图标样式 */

	.checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
		width: 50upx;
		height: 50upx;
		line-height: 50upx;
		text-align: center;
		font-size: 24upx;
		color: #fff;
		background: transparent;
		transform: translate(-50%, -50%) scale(1);
		-webkit-transform: translate(-50%, -50%) scale(1);
	}

	#app {
		width: 100vw;
		height: 100vh;
	}


	.flex-col {
		display: flex;
		flex-direction: column;
	}

	.items-start {
		display: flex;
		align-items: flex-start;
	}



	.page {
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.group_4 {
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.section_1 {
		padding: 28rpx 0 29rpx;
		background-color: #f3f3f3;
		margin-top: 20rpx;
	}

	.group_6 {
		padding: 24rpx 30rpx 20rpx;
	}

	.group_5 {
		margin-left: 30rpx;
		line-height: 23rpx;
	}



	.text_2 {
		color: #999999;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 23rpx;
	}

	.text_3 {
		color: #2f75fa;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 22rpx;
	}

	.text_4 {
		color: #999999;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 23rpx;
	}

	.text_5 {
		color: #2f75fa;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 22rpx;
	}

	.page-bg {
		width: 100vw;
		min-height: 100vh;
		overflow-x: hidden;
		background-size: 750rpx auto;
		background-color: #F9F9F9;
	}

	.main-container {
		width: 686rpx;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
	}

	.tl-panel {
		margin-top: 40rpx;
		margin-bottom: 48rpx;
	}

	.tl-img-44 {
		width: 44rpx;
		height: 44rpx;
	}

	.tl-tag-192 {
		width: 192rpx;
		height: 64rpx;
		line-height: 64rpx;
		background: rgba(255, 255, 255, 0.39);
		border: 2rpx solid #F5F5F5;
		text-align: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
		border-radius: 32rpx;
		margin-right: 28rpx;
		margin-bottom: 28rpx;
	}

	.tl-section-list {
		height: 214rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		position: relative;
	}

	.tl-section-list:after {
		content: '';
		position: absolute;
		left: 150rpx;
		top: 214rpx;
		bottom: 0px;
		right: 32rpx;
		height: 2rpx;
		width: 538rpx;
		background-color: #D6D6D6;
	}

	.m-t-220 {
		margin-top: 220rpx;
	}

	.tl-img-120 {
		width: 120rpx;
		height: 120rpx;
	}

	.tl-w-538 {
		width: 538rpx;
		margin: 46rpx 0 48rpx 28rpx;
	}

	.mb-20 {
		margin-bottom: 20rpx;
	}

	.tl-footer {
		width: 750rpx;
		height: 162rpx;
		background: #FFFFFF;
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		margin: 0 auto;
		text-align: center;
		display: flex;
		justify-content: center;

		.tl-btn-686 {
			width: 686rpx;
			height: 84rpx;
			line-height: 84rpx;
			background: #002FA7;
			border-radius: 42rpx;
			margin-top: 24rpx;
		}
	}


	/deep/ checkbox .wx-checkbox-input {
		border-radius: 50% !important;
		color: #ffffff !important;
	}

	/deep/ checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		color: #fff;
		background: #2851F3;
	}

	/deep/.wx-checkbox-input.wx-checkbox-input-checked {
		border: none !important;
	}

	/* 左右滑动 */
	.uni-swiper-tab {
		white-space: nowrap;
	}

	.model_scrollx {
		justify-content: space-between;
		// padding: 20rpx 0 30rpx 0;
	}

	.scrollx_items {
		// padding: 30rpx 20rpx;
		text-align: center;
		display: inline-block;
		width: 180rpx;
		box-sizing: border-box;
		box-shadow: 0px 0px 5px #dfdeff;
		height: 120rpx;
		margin-top: 20rpx;
		margin-left: 20rpx;
	}

	.scrollx_items:last-child {
		margin-right: 30rpx;
	}

	.scrollx_items image {
		width: 70rpx;
		height: 66rpx;
	}

	.tgyx_title {
		font-size: 28rpx;
		color: #333333;
		margin-top: 30rpx;
	}

	.tgyx_desc {
		font-size: 24rpx;
		margin-top: 10rpx;
	}

	.tg_zdtg {
		background: linear-gradient(bottom right, #d5e4fa, #dae7fb);
		// box-shadow: 0px 0px 5px #d3d3d3;
		color: #477cd3;
	}

	.tg_hot {
		background: linear-gradient(bottom right, #fffcec, #fbf6d9);
		color: #ffa800;
	}

	.tg_zshy {
		background: linear-gradient(bottom right, #fdf7fe, #f9e5fe);
		color: #c559de;
	}

	.tg_hjhy {
		background: linear-gradient(bottom right, #fff8f0, #fff0df);
		color: #f3791f;
	}

	.checkbox .wx-checkbox-input {
		border-radius: 30upx;
		/* 圆角 */
		width: 30upx;
		/* 背景的宽 */
		height: 30upx;
		/* 背景的高 */
		border: 1px solid #ccc;
		background: #eee;
	}

	/* 复选框禁用样式 */

	.checkbox .wx-checkbox-input-disabled {
		border-radius: 30upx;
		/* 圆角 */
		width: 30upx;
		/* 背景的宽 */
		height: 30upx;
		/* 背景的高 */
		background: #f3f3f3;
		border: 1px solid rgba(201, 201, 201, 1);
	}

	/* 复选框选中后样式 */

	.checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		background: rgba(255, 129, 92, 1);
		border: 1px solid rgba(255, 129, 92, 1);
	}

	/*checkbox选中后图标样式 */

	.checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
		width: 30upx;
		height: 30upx;
		line-height: 30upx;
		text-align: center;
		font-size: 24upx;
		color: #fff;
		background: transparent;
		transform: translate(-50%, -50%) scale(1);
		-webkit-transform: translate(-50%, -50%) scale(1);
	}

	/deep/ checkbox .wx-checkbox-input {
		border-radius: 50% !important;
		color: #ffffff !important;
	}

	/deep/ checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		color: #fff;
		background: #2851F3;
	}

	/deep/.wx-checkbox-input.wx-checkbox-input-checked {
		border: none !important;
	}
</style>